<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- v-bind:value => :value -->
        <!-- v-model:value => v-model -->
        <!-- 这里需要双向的数据绑定才能保证当输入框的数据发生变化时，其他位置的值也能随时发生变化 -->
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName">  <br><br>
        <!-- 1.使用插值实现 -->
        <!-- 全名：<span>{{ firstName }}-{{ lastName }}</span> -->
        <!-- 2.使用方法实现 -->
        <!-- 
            {{}}中是表达式，可以写变量、方法等
            fullName是一个函数对象，而fullName()则是函数的返回值
         -->
        全名：<span>{{ fullName() }}</span>

    </div>

    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三"
                
            },
            methods: {
                fullName() {
                    // console.log(this);  // 这里的this是vue实例对象
                    // 该方法必须要有一个返回值
                    return `${this.firstName}-${this.lastName}`


                }                
            }
        })
    </script>
</body>
</html>